<template>
  <div class="chartContainer_wrap">
    <div ref="chartContainerRef" style="height: 680px;"></div>
  </div>
</template>

<script setup name="CurveCharts">

import { ref, reactive } from 'vue'
import * as echarts from "echarts"

// 获取节点
const chartContainerRef = ref(null);

onMounted(() => {
  //获取echarts实例
  const chartInstance = echarts.init(chartContainerRef.value);
  // 设置图表配置项
  chartInstance.setOption({
    tooltip: {
      trigger: "axis",
      formatter: "数值 {c}GHz",
    },
    xAxis: {
      show: true,
      data: [1, 2, 3, 4, 5],
      axisLine: {
        show: true, // 是否显示坐标轴轴线
        lineStyle: {
          width: 1, // 设置加粗的宽度
          color: "#0c8cab" // 设置颜色渐变
        }
      },
      axisLabel: {
        color: "#fff",
        fontSize: '16',
        fontWeight: 'bold'
      },
      axisTick: {
        show: false,    // 是否显示坐标轴刻度
      }
    },
    yAxis: {
      show: false,
      type: 'value',
      min: 0,
      max: 3,
      interval: 0.5,
      // axisLabel: {
      //   formatter: function (value, index) {
      //     return (value * 100).toFixed(2) + "%";
      //   }
      // }
    },
    series: [
    //   {
    //   data: [1, 1.15, 1.2, 1.1, 1],
    //   type: 'line',
    //   smooth: true,
    //   // 这里可以设置线条样式
    //   // 数值展示
    //   label: {
    //     show: true, // 是否展示
    //     position: 'top', // 展示位置
    //     color: '#fff', // 展示颜色
    //     fontSize: 14, // 展示文字大小
    //     formatter: '{c}', // 展示文字格式
    //   },
    //   itemStyle: {
    //     normal: {
    //       lineStyle: {
    //         width: 2,
    //         type: 'dotted'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
    //       }
    //     }
    //   }
    // },
    {
      name: '基准线',
      type: 'line',
      showSymbol:false,
      itemStyle: {
        normal: {
          lineStyle: {
            width: 2,
            type: 'dotted',  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
            color: '#096b88'
          }
        }
      },
      label: {
        show: true, // 是否展示
        position: 'top', // 展示位置
        color: '#fff', // 展示颜色
        fontSize: 14, // 展示文字大小
        formatter: '{c}', // 展示文字格式
      },
      data: [0.5, 0.5, 0.5, 0.5, 0.5]
    },
    {
      name: '基准线',
      type: 'line',
      showSymbol:false,
      itemStyle: {
        normal: {
          lineStyle: {
            width: 2,
            type: 'dotted',  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
            color: '#096b88'
          }
        }
      },
      label: {
        show: true, // 是否展示
        position: 'top', // 展示位置
        color: '#fff', // 展示颜色
        fontSize: 14, // 展示文字大小
        formatter: '{c}', // 展示文字格式
      },
      data: [1.0, 1.0, 1.0, 1.0, 1.0]
    }
    ]
  })
})
</script>
<style lang="scss" scoped>
.chartContainer_wrap {
  position: absolute;
  width: 100%;
  top: 270px;
  left: 0;
  z-index: 5;
}
</style>